<template>
    <div class="gifts_form_wrapper">
        <div class="gifts_form">
            <h4 class="title">基础信息</h4>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="支付有礼名称" prop="name">
                    <el-input v-model="ruleForm.name" style="width: 30%" maxlength="10" placeholder="支付有礼名称，不超过10个字"></el-input>
                </el-form-item>
                <el-form-item label="使用时间" prop="start_time">
                    <el-date-picker v-model="ruleForm.start_time" :picker-options="pickerOptions" type="datetime" placeholder="开始时间"></el-date-picker>&nbsp;至&nbsp;
                    <el-date-picker v-model="ruleForm.end_time" :picker-options="pickerOptions" type="datetime" placeholder="结束时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="库存" prop="inventory">
                    <el-input v-model="ruleForm.inventory" @input="ruleForm.inventory=ruleForm.inventory.replace(/[^\d]/g,'')" maxlength="6" style="width: 20%" placeholder="库存数量，最多100000"></el-input>
                </el-form-item>
                <el-form-item label="活动叠加设置">
                    <el-checkbox v-model="ruleForm.activeIsCheck">支付有礼可与优惠券、优惠码、限时折扣、秒杀叠加使用</el-checkbox>
                </el-form-item>
                <el-form-item label="发放条件设置">
                    <el-radio v-model="ruleForm.condition" label="1">全部订单</el-radio><span style="font-size: 12px;color:#999;">包含0元订单在内的满足活动叠加设置且满足支付有礼条件的订单</span><br />
                    <el-radio v-model="ruleForm.condition" label="2">非0订单</el-radio><span style="font-size: 12px;color:#999;">仅支持支付金额大于0的订单</span>
                </el-form-item>
                <h4 class="title">参与条件</h4>
                <el-form-item label="适用人群">                    
                    <el-button icon="el-icon-plus" @click="addAudience">添加人群</el-button><span style="margin: 0 0 0 20px;font-size: 12px;color:#999;">不添加则默认所有用户均有资格参与</span>
                    <div style="margin: 10px 0 20px 0;" v-if="suitCrowdTableData.length > 0">
                        <el-table
                            :data="suitCrowdTableData"
                            border>
                            <el-table-column prop="name" label="用户群" width="200"></el-table-column>
                            <el-table-column prop="number" label="人数" width="200"></el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">             
                                    <el-button type="text" size="small" @click="removeAudience(scope.row)">移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>                    
                </el-form-item>
                <el-form-item label="消费方式" prop="consumMode">
                    <el-input type="hidden" style="display: none;" v-model="ruleForm.consumMode" placeholder="请选择商品"></el-input>
                    <el-radio v-model="ruleForm.specifiedIsCheck" label="1">购买指定商品参与</el-radio>
                    <el-button icon="el-icon-plus" @click="addProduct">添加商品</el-button>
                </el-form-item>
                <h4 class="title">权益设置</h4>
                <el-form-item label="选择权益" prop="chooseEquity">
                    <el-input type="hidden" style="display: none;" v-model="ruleForm.chooseEquity"></el-input>
                    <div class="equity_item">
                        <el-radio v-model="ruleForm.equityIsCheck" label="1">送优惠券</el-radio><span class="intro">用户付款后，可获得优惠券</span>
                        <el-button v-if="ruleForm.equityIsCheck == '1'" icon="el-icon-plus" @click="addPreferential(0)">添加优惠券</el-button>
                    </div>
                    <div class="equity_item">
                        <el-radio v-model="ruleForm.equityIsCheck" label="2">送优惠码</el-radio><span class="intro">用户付款后，可获得优惠码</span>
                        <el-button v-if="ruleForm.equityIsCheck == '2'" icon="el-icon-plus" @click="addPreferential(1)">添加优惠码</el-button>
                    </div> 
                    <div class="equity_item">
                        <el-radio v-model="ruleForm.equityIsCheck" label="3">送兑换码</el-radio><span class="intro">用户付款后，可获得兑换码</span>
                        <p v-if="ruleForm.equityIsCheck == '3'" class="desc">*为了避免同一个兑换码被重复发放，建议新建一个专用于该支付有礼活动的兑换码码库</p>
                        <el-button v-if="ruleForm.equityIsCheck == '3'" icon="el-icon-plus" @click="addPreferential(2)">添加兑换码</el-button>
                    </div>                  
                </el-form-item>
                <el-form-item>
                    <div class="footer_btn_group">
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog
            :title="`添加${dialogTitle}`"
            :visible.sync="dialogVisible"
            :width="size"            
            :close-on-click-modal="false">
            <div class="dialog_body_content" v-if="dialogTitle == '用户群'">
                <div class="association_wrapper">
                    <div class="association_item" v-for="item in suitCrowdList">
                        <el-checkbox v-model="item.isCheck">{{ item.name }}<span class="total">{{ item.number }}人</span></el-checkbox>
                    </div>
                </div>                
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sureAddAudience">确 定</el-button>
                </div>
            </div>
            <div class="dialog_body_content" v-else>
                <div class="table_filter">
                    <div class="btn_group">
                        <el-button type="primary" @click="createPreferential(dialogTitle)">新建{{ dialogTitle }}</el-button>
                        <el-button type="text" @click="refreshTableData(dialogTitle)">刷新</el-button>
                    </div>
                    <div class="filter_group">
                        <el-input v-model="tableParams.keyword" :placeholder="`请输入${dialogTitle}名称`" prefix-icon="el-icon-search"></el-input>
                        <el-button plain @click="searchPreferential(dialogTitle)">搜索</el-button>
                    </div>
                </div>
                <div class="table_warp">
                    <el-table
                        :data="preferentialTableData"
                        border>
                        <div v-if="dialogTitle == '优惠券'">
                            <el-table-column prop="name" :label="`${dialogTitle}名称`" width="230"></el-table-column>
                            <el-table-column prop="type" label="类型" width="110"></el-table-column>
                            <el-table-column prop="validTime" label="有效期" width="200"></el-table-column>                            
                            <el-table-column prop="content" label="优惠内容" width="219"></el-table-column>                        
                        </div>
                        <div v-if="dialogTitle == '优惠码'">
                            <el-table-column prop="name" :label="`${dialogTitle}名称`" width="179"></el-table-column>
                            <el-table-column prop="desc" label="内部备注" width="120"></el-table-column>
                            <el-table-column prop="type" label="优惠码类型" width="110"></el-table-column>
                            <el-table-column prop="validTime" label="有效期" width="200"></el-table-column>
                            <el-table-column prop="content" label="优惠内容" width="150"></el-table-column>                        
                        </div>
                        <div v-if="dialogTitle == '兑换码'">
                            <el-table-column prop="name" :label="`${dialogTitle}名称`" width="230"></el-table-column>
                            <el-table-column prop="number" label="兑换权益数" width="130"></el-table-column>
                            <el-table-column prop="validTime" label="有效期" width="200"></el-table-column>
                            <el-table-column prop="limit" label="兑换限制" width="199"></el-table-column>
                        </div>                        
                    </el-table>
                </div>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
            </div>            
        </el-dialog>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    data(){
        return{
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            ruleForm: {
                name: '',
                start_time: '',
                end_time: '',
                inventory: '',
                activeIsCheck: '',
                condition: '1',
                consumMode: '',
                specifiedIsCheck: '1',
                chooseEquity: '',
                equityIsCheck: '1',
            },
            rules: {
                name: [
                    { required: true, message: '请输入支付有礼名称', trigger: 'blur' },
                ],
                start_time: [
                    { required: true, message: '请选择开始、结束时间', trigger: 'change' }
                ],
                inventory: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' },
                ],
                consumMode: [
                    { required: true, message: '请选择消费商品', trigger: 'blur' },
                ],
                chooseEquity: [
                    { required: true, message: '请选择权益商品', trigger: 'blur' },
                ]
            },
            suitCrowdList: [
                { id: nanoid(),name: '兴趣人群',number: 0,isCheck: false },
                { id: nanoid(),name: '新成交客户人群',number: 0,isCheck: false },
                { id: nanoid(),name: '高活跃人群',number: 0,isCheck: false },
            ],
            tempCrowdData: [],
            suitCrowdTableData: [],
            preferentialTableData: [],
            dialogTitle: '',
            dialogVisible: false,
            dialogInsertVisible: false,
            size: 0,
            tableParams: {
                keyword: '',
            }
        }
    },
    mounted(){

    },
    methods: {
        addAudience(){  // 添加人群
            this.dialogTitle = '用户群';
            this.dialogVisible = true;
            this.suitCrowdList.forEach(v => v.isCheck = false);
            this.size = '500px';
        },
        sureAddAudience(){  // 确认添加用户群
            let isCheckCrowdList = this.suitCrowdList.filter(item => item.isCheck);
            isCheckCrowdList.forEach((v,i) => this.tempCrowdData.push(v));
            this.suitCrowdTableData = removeSameArray(this.tempCrowdData,'name');
            this.dialogVisible = false;
        },        
        removeAudience(v){   // 移除用户群
            this.suitCrowdTableData = this.suitCrowdTableData.filter(item => item.name !== v.name);
            this.tempCrowdData = this.tempCrowdData.filter(item => item.name !== v.name);
        },
        addProduct(){   // 添加商品
            console.log('添加商品');
        },
        addPreferential(i){ // 添加优惠（优惠券、优惠码、兑换码）
            let names = ['优惠券','优惠码','兑换码'];
            this.dialogTitle = names[i];
            this.dialogVisible = true;
            this.size = '800px';
        },
        createPreferential(t){   // 新建（优惠券、优惠码、兑换码）
            console.log('create',t);
        },
        refreshTableData(t){   // 刷新
            console.log('refresh',t);
        },
        searchPreferential(t){   // 搜索
            console.log('search',t,this.tableParams);
        },
        resetForm(formName) {   // 取消创建
            this.$refs[formName].resetFields();
        },
        submitForm(formName){   // 保存创建
            this.$refs[formName].validate((valid) => {
                if (valid) {
                             
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.gifts_form_wrapper{
    min-width: 1000px;
    display: flex;
    justify-content: space-between;
    .gifts_form{
        width: 100%;
        background-color: #fff;
        margin: 10px 0 40px 0;
        padding: 10px;
        .title{
            font-size: 16px;
            padding: 0 0 0 10px;
            margin: 0 0 20px 0;
            position: relative;
            &::before{
                content: "";
                position: absolute;
                width: 2px;
                height: 14px;
                margin: 3px 0;
                background: #105cfb;
                left: 0;
            }
        }
        .equity_item{
            margin: 0 0 10px 0;
            .intro{
                margin: 0 0 0 20px;
                font-size: 12px;
                color:#999;
            }
            .desc{
                color: #fb6161;
                font-size: 12px;
            }
            .el-button{
                display: block;
                margin: 10px 0 0 0;
            }
        }
        .footer_btn_group{
            width: 100%;
            height: 60px;
            background-color: #fff;
            position: fixed;
            left: 180px;
            bottom: 0;
            z-index: 999;
            line-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #eee;
        }
    }
    ::v-deep .el-dialog__wrapper{
        .el-dialog__header{
            padding: 15px 20px;
            background-color: #f5f7fa;
        }
        .el-dialog__body{
            .dialog_body_content{
                .association_wrapper{
                    .association_item{
                        padding: 10px 0;
                        border-bottom: 1px solid #eee;                        
                        .el-checkbox{
                            width: 100%;
                            position: relative;
                            .total{
                                position: absolute;
                                right: 0;
                                top: 0;
                            }
                        }
                        .el-checkbox.is-checked{
                            .el-checkbox__label{
                                color: #606266;
                            }
                        }
                    }
                }                
                .table_filter{
                    display: flex;
                    justify-content: space-between;
                    margin: 0 0 10px 0;
                    .filter_group{
                        display: flex;
                        .el-button{
                            margin: 0 0 0 10px;
                        }
                    }
                }
                .dialog-footer{
                    text-align: center;
                    margin: 50px auto 0;
                }
            }
        }
    }
}
</style>